<template>
  <!-- 打样信息 -->
  <div class="modelInfoTab" :style="{height:tabHeight+'px'}">
    <!-- 查询表单 -->
    <div class="queryFormBox">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryForm.clientContractNo" placeholder="请输入客户合同编号"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryForm.proofingName" placeholder="请输入打样名称"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryForm.productWeight" placeholder="请输入重量"/>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryForm.clientId" placeholder="请输入客户名称" clearable>
            <el-option v-for="item in clientList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="dateTimeRange" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFun" icon="el-icon-search" size="small">查询</el-button>
          <!-- <el-button type="primary" @click="addFun" icon="el-icon-edit" size="small">新增</el-button>
          <el-button type="danger" @click="delsFun" size="small">批量删除</el-button>
          <el-button type="success" @click="exportFun" size="small">导出</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table :data="tableInfo.tableData" border :height="tabHeight - 95"
        :header-cell-style="{ background: '#E5EDFD' }">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column header-align="center" align="center" label="序号" width="70">
          <template slot-scope="scope">
            {{ (pageInfo.pageIndex - 1) * pageInfo.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="客户合同编号" prop="clientContractNo" header-align="center" align="center" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column label="模具编号" prop="modelNo" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="打样名称" prop="proofingName" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="工艺描述" prop="customerRequire" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="订单模式" prop="needPurchaseType" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.needPurchaseType == 0" :key="scope.row.needPurchaseType" type="success" size="small">通货</el-tag>
            <el-tag v-if="scope.row.needPurchaseType == 1" :key="scope.row.needPurchaseType" type="primary" size="small">现模</el-tag>
            <el-tag v-if="scope.row.needPurchaseType == 2" :key="scope.row.needPurchaseType" type="danger" size="small">开模</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="产品类型" prop="productCategoryId" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <template v-for="tagItem in tableInfo.productCategoryList" >
              <el-tag 
                v-if="tagItem.value === scope.row.productCategoryId"
                :key="tagItem.value"
                :type="tagItem.tagType || 'primary'"
                size="small">{{ tagItem.text }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="口径" prop="calibrator" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="收费情况" prop="chargeStatus" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.chargeStatus == 0" :key="scope.row.chargeStatus" type="primary" size="small">免费</el-tag>
            <el-tag v-if="scope.row.chargeStatus == 1" :key="scope.row.chargeStatus" type="success" size="small">收费</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="unitPrice" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="数量" prop="number" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="克数" prop="weightStr" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="remark" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="容量" prop="volumeScopeStr" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户" prop="clientName" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="打样时间" prop="proofingTime" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="销售" prop="salesperson" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="试样模是否到位" prop="modelProofingStatus" header-align="center" align="center" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.modelProofingStatus == 0" :key="scope.row.modelProofingStatus" type="danger" size="small">未到位</el-tag>
            <el-tag v-if="scope.row.modelProofingStatus == 1" :key="scope.row.modelProofingStatus" type="success" size="small">到位</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否已转大货" prop="changeProductInfo" header-align="center" align="center" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.changeProductInfo == 0" :key="scope.row.changeProductInfo" type="danger" size="small">未转为大货</el-tag>
            <el-tag v-if="scope.row.changeProductInfo == 1" :key="scope.row.changeProductInfo" type="success" size="small">已转为大货</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图纸" prop="productDrawingId" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" prop="status" header-align="center" align="center" show-overflow-tooltip width="120">
          <template slot-scope="scope">
            <template v-for="tagItem in tableInfo.statusList" >
              <el-tag 
                v-if="tagItem.value === scope.row.status"
                :key="tagItem.value"
                :type="tagItem.tagType || 'primary'"
                size="small">{{ tagItem.text }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="140" align="center">
          <template #default>
            <el-tooltip v-if="isAuth(saveAuthName)" class="item" effect="dark" content="修改" 
              placement="bottom" :hide-after="1800" :open-delay="800">
              <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
            </el-tooltip>
            <el-tooltip v-if="isAuth(deleteAuthName)" class="item" effect="dark" content="删除" 
              placement="bottom" :hide-after="1800" :open-delay="800">
              <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageBox">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageInfo.pageIndex"
        :page-sizes="[20, 50, 100,200,1000]"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mRequest } from '@/utils/request'
import { getFormatDateTime, timeShortcutOption } from '@/utils'
import { isAuth } from '@/utils'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      isAuth: isAuth,
      saveAuthName: 'order:ordermodel:save',
      deleteAuthName: 'order:ordermodel:delete',
      queryForm: {
        clientContractNo: undefined,
        proofingName: undefined,
        productWeight: undefined,
        clientId: undefined,
        startDateTime: undefined,
        endDateTime: undefined,
      },
      clientList: [], //客户名称
      dateTimeRange: '', //时间范围
      pickerOptions: timeShortcutOption(),
      tableInfo:{
        tableData:[],
        productCategoryList: [
          {value: 1, text: '光瓶',tagType:'success'},
          {value: 23, text: '纸箱',tagType: 'danger'},
          {value: 25, text: '礼盒',tagType: 'danger'},
          {value: 3, text: '喷头',tagType: 'success'},
          {value: 4, text: '中套'},
          {value: 5, text: '披肩',tagType: 'warning'},
          {value: 6, text: '塑料盖',tagType:'warning'},
          {value: 7, text: '锌合金盖',tagType:'danger'},
          {value: 8, text: '香薰棒',tagType:'danger'},
          {value: 9, text: '树脂盖',tagType:'success'},
          {value: 11, text: '深加工',tagType:'danger'},
          {value: 66, text: '滚珠',tagType:'info'},
          {value: 77, text: '电化铝盖',tagType:'warning'},
          {value: 88, text: '软管类',tagType:'info'},
          {value: 99, text: '其它',tagType:'danger'},
          {value: 100, text: '配件'},
          {value: 111, text: '拉管玻璃瓶'},
          {value: 999, text: '标牌',tagType:'info'},
          {value: 666, text: '木头竹子盖'},
          {value: 888, text: '膏霜罐'},
          {value: 8888, text: '小喷雾乳液泵',tagType:'success'},
          {value: 88888, text: '香水樽',tagType:'warning'},
          {value: 888888, text: '塑料瓶'},
        ],
        statusList: [
          {value: -1, text: '预排产',tagType: 'danger'},
          {value: 0, text: '待配货',tagType: 'info'},
          {value: 1, text: '供应商待确定',tagType: 'info'},
          {value: 2, text: '加急', tagType: 'warning'},
          {value: 3, text: '正常', tagType: 'primary'},
          {value: 99, text: '取消', tagType: 'danger'}
        ],
      },
      pageInfo: {
        pageIndex: 1,
        pageSize: 20,
        totalPage: 0
      },
    }
  },
  watch: {},
  computed: {},
  props:{
    tabHeight:{
      type: Number,
      default: 0
    }
  },
  created() { },
  mounted() {
    this.getSelectData()
    this.initTableData()
  },
  methods: {
    // 查询
    queryFun() {
      this.queryForm.startDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[0]) : undefined
      this.queryForm.endDateTime = this.dateTimeRange ? getFormatDateTime(this.dateTimeRange[1]) : undefined
      this.initTableData()
    },
    // 新增
    addFun() {
      this.dialogInfo.visible = true
    },
    // 批量删除
    delsFun() {

    },
    // 导出
    exportFun() {

    },
    // 下拉框数据
    getSelectData() {
      mRequest('clientApi/getClientList', {}, ({ data }) => {
        this.clientList = data['list']
      })
    },
    // 表格数据
    initTableData() {
      let params = {
        page: this.pageInfo.pageIndex,
        limit: this.pageInfo.pageSize,
        ...this.queryForm
      }
      mRequest('orderApi/listOrderProofing', params, ({ data }) => {
        this.tableInfo.tableData = data.page.list
        this.pageInfo.totalPage = data.page.totalCount
      })
    },
    // 分页事件
    sizeChangeHandle(val) {
      this.pageInfo.pageSize = val
      this.initTableData()
    },
    currentChangeHandle(val) {
      this.pageInfo.pageIndex = val
      this.initTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.modelInfoTab {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
}
.queryFormBox {
  .el-button--danger {
    background-color: #ffa4a4;
    border-color: #ffa4a4;
  }
  .el-form-item{
    margin-bottom: 14px;
  }
}
.tableBox{
  flex: 1;
}
::v-deep .el-table th{
  padding: 10px 0;
}
::v-deep .el-table td{
  padding: 0;
}
.pageBox{
  height: 32px;
}
.dialogBox{
  .el-form-item{
    margin-bottom: 0;
  }
  .inputNumLayout{
    position: relative;
    .maxLabel{
      position: absolute;
      right: 130px;
      opacity: 0.5;
    }
  }
}
</style>